import React from 'react';
import {Row, Col, Menu, Icon } from 'antd';

import styles from './Header.less';
import States from 'assets/states.js';
const logo = require('images/assets/logo.svg');



class BrowserHeader extends React.Component{
    state = {
        menus: States.header.menus,
        visible: false,
        windowWidth:  window.innerWidth,
        icon: false,
    }
    //窗口变化
    handleResize = (e) => {
        this.setState({
            windowWidth:  window.innerWidth,
        })
    }

    getMenus = (menus) => {
        return menus.map( (item) => {
            return <Menu.Item className="menu-row-col-main-content" key={item}>{item}</Menu.Item>
        })
        
    }

    handleIcon = (e) => {
        this.setState({
            icon: !this.state.icon
        })
    }

    componentDidMount(){
        
        window.addEventListener('resize', this.handleResize);
    }

    componentWillUnmount(){
        window.removeEventListener('resize', this.handleResize);
    }

    handleIsNavbar = () => {
        return this.state.windowWidth < 470;
    }

    


    render() {
        return (
            <div className="menu" >
               <Row type="flex" justify="center" className="menu-row"  >
                   <Col span={16} className="menu-row-col" >
                       {this.handleIsNavbar() ? 
                        <div className="collapsible-menu">
                            <div className="collapsible-menu-logo"><img src={logo} /></div>
                            <input type="checkbox" id="menu" />
                            <label for="menu" onClick={this.handleIcon}>
                               {this.state.icon ? <Icon type="close" /> : <Icon type="bars" />}
                            </label>
                            <div className="menu-content">
                                <ul>
                                    <li><a href="#"></a>Home</li>
                                    <li><a href="#"></a>Services</li>
                                    <li><a href="#"></a>Projects</li>
                                    <li><a href="#"></a>About</li>
                                    <li><a href="#"></a>Blog</li>
                                    <li><a href="#"></a>Contacts</li>
                                </ul>
                            </div>
                        </div>

                            :<Menu className="menu-row-col-main" mode="horizontal">
                                <Menu.Item className="menu-row-col-main-logo" key="logo">
                                   <img src={logo} className="menu-row-col-main-logo-img" />
                                </Menu.Item>
                                {this.getMenus(this.state.menus)}
                            </Menu>
                       }
                   </Col>
               </Row>
            </div>
            
        )
    }
}

export default BrowserHeader;